<template>
	<view class="container">
		<view class="mainWp">
			<view class="groupItem">
				<view class="photoList">
					<view class="photo" v-for="(item,index) in groupImgList" :key="index">
						<image mode="aspectFill" :src="item.path" @click="showBigImg(item.path)"></image>
						<view class="contextWp">
							{{item.context?item.context:''}}
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: null,
				pageNo: 1,
				pageSize: 10,
				groupImgList: [],
				albumId: "",
			}
		},

		onLoad(opt) {
			uni.showLoading({

			})
			console.log(opt, 'opt');
			this.albumId = opt.albumId || ''
			this.queryPhotoByAlbumId()
		},
		onReachBottom() {
			if (this.total > this.pageNo * this.pageSize) {
				this.pageNo++
				this.queryPhotoByAlbumId()
			} else {
				uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				});
			}
		},
		onPullDownRefresh() {
			this.reFlash()
		},
		methods: {
			//根据群相册id查询照片列表 
			async queryPhotoByAlbumId() {
				let payload = {
					albumId: this.albumId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					isDel: 0,
				}
				let res = await this.$api.queryPhotoByAlbumId(payload)
				if (res.success) {
					console.log(res.result.records);
					this.groupImgList = [...this.groupImgList, ...res.result.records]
					this.groupImgList = this.groupImgList.filter(item => item.path)
					this.total = res.result.total || 0
				} else {
					this.groupImgList = []
					console.log(res.message);
					this.total = null
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			async reFlash() {
				uni.showLoading({

				})
				this.pageNo = 1
				if (this.status == 0) {
					this.createBy = ""
				}
				if (this.status == 1) {
					this.createBy = this.openId
				}
				let payload = {
					albumId: this.AlbumInfo.id,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					isDel: 0,
					createBy: this.createBy
				}
				let res = await this.$api.queryPhotoByAlbumId(payload)
				if (res.success) {
					this.groupImgList = res.result.records.filter(item => item.path)
					this.total = res.result.total || 0
					uni.stopPullDownRefresh()
				} else {
					this.groupImgList = []
					this.total = 0
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			showBigImg(current) {
				let urls = this.groupImgList.map(item => item.path)
				uni.previewImage({
					urls,
					current
				})
			},

		},
		onShareAppMessage() {
			return {
				path: '/pagesCard/quickGroupShare/quickGroupShare?albumId=' + (this.albumId || '')
			}
		},
		onShareTimeline() {
			return {
				query: 'albumId=' + (this.albumId || '')
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #F8F9FF;
		padding: 30upx;

		.mainWp {
			margin-top: 30upx;
			padding-bottom: 130upx;

			.groupItem {
				.photoList {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					.photo {
						flex: 1;

						margin: 0 5px 5px 0; // 间隙为5px
						background-color: #999;
						width: calc((100% - 10px) / 3); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
						min-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了
						max-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了

						&:nth-child(3n) {
							// 去除第3n个的margin-right
							margin-right: 0;
						}

						image {
							width: 100%;
							height: 220upx;
						}
					}

					.contextWp {
						text-align: center;
						font-size: 24rpx;
						color: #333;
						line-height: 30rpx;
					}
				}

			}

			.uploadWp {
				box-sizing: border-box;
				width: 100%;
				position: fixed;
				bottom: 30upx;
				left: 0;
				height: 100upx;
				padding: 20upx 40upx;
				margin-top: 40upx;

			}
		}

	}
</style>
